<!DOCTYPE html>
<html lang="en">

<head>
	<title>加载模型例子</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
		body {
			color: #000;
			font-family: Monospace;
			font-size: 13px;
			text-align: center;
			font-weight: bold;

			background-color: #fff;
			margin: 0px;
			overflow: hidden;
		}

		#info {
			color: #000;
			position: absolute;
			top: 0px;
			width: 100%;
			padding: 5px;

		}

		a {
			color: red;
		}
	</style>
</head>

<body>

	<div id="container"></div>
	<div id="info">
		<a href="#" onclick="suspend();">暂停</a>
		<a href="#" onclick="resume();">继续</a>
		<a href="#" onclick="showInfo();">显示参数</a>
		三维展示</br>
	</div>

	<script src="./lib/three.js"></script>
	<script src="./lib/STLLoader.js"></script>
	<script src="./lib/TrackballControls.js"></script>
	<script src="./lib/Detector.js"></script>
	<script src="./lib/stats.min.js"></script>

	<script>
		if (!Detector.webgl) Detector.addGetWebGLMessage();
		var container, stats;
		var isMove = false;
		var camera, cameraTarget, scene, renderer, controls;

		init();
		animate();

		function init() {
			container = document.createElement('div');
			document.body.appendChild(container);
			camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 100);
			//camera.position.set( 3, 0.15, 3 );
			camera.position.set(-0.7486771118251756, 0, 2.905078756631068);
			cameraTarget = new THREE.Vector3(0, 0, 0);

			//:初始化控件
			controls = new THREE.TrackballControls(camera);

			controls.rotateSpeed = 5.0;
			controls.zoomSpeed = 1.2;
			controls.panSpeed = 0.8;

			controls.noZoom = false;
			controls.noPan = false;

			controls.staticMoving = true;
			controls.dynamicDampingFactor = 0.3;

			controls.keys = [65, 83, 68];

			controls.addEventListener('change', render);


			//初始化场景
			scene = new THREE.Scene();
			scene.fog = new THREE.Fog(0x72645b, 2, 15);

			// 加载模型
			var loader = new THREE.STLLoader();
			loader.load('./data/netpot_20141023-18164-1lfw627-0.stl', function (geometry) {
				var material = new THREE.MeshPhongMaterial({
					color: 0xff5533,
					specular: 0x111111,
					shininess: 200
				});
				var mesh = new THREE.Mesh(geometry, material);
				mesh.position.set(-0.1, 0.1, 0);
				var scale = 0.01;
				mesh.scale.set(scale, scale, scale);
				mesh.castShadow = true;
				mesh.receiveShadow = true;
				scene.add(mesh);
			});

			// Lights
			scene.add(new THREE.HemisphereLight(0x443333, 0x111122));
			addShadowedLight(1, 1, 1, 0xffffff, 1.35);
			addShadowedLight(0.5, 1, -1, 0xffaa00, 1);

			// renderer
			renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setClearColor(scene.fog.color);
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			renderer.gammaInput = true;
			renderer.gammaOutput = true;
			renderer.shadowMap.enabled = true;
			renderer.shadowMap.renderReverseSided = false;
			container.appendChild(renderer.domElement);

			// stats
			stats = new Stats();
			container.appendChild(stats.dom);

			// 增加窗口大小调整事件监听
			window.addEventListener('resize', onWindowResize, false);
		}

		// 增加阴影光源
		function addShadowedLight(x, y, z, color, intensity) {
			var directionalLight = new THREE.DirectionalLight(color, intensity);
			directionalLight.position.set(x, y, z);
			scene.add(directionalLight);
			directionalLight.castShadow = true;
			var d = 1;
			directionalLight.shadow.camera.left = -d;
			directionalLight.shadow.camera.right = d;
			directionalLight.shadow.camera.top = d;
			directionalLight.shadow.camera.bottom = -d;
			directionalLight.shadow.camera.near = 1;
			directionalLight.shadow.camera.far = 4;
			directionalLight.shadow.mapSize.width = 1024;
			directionalLight.shadow.mapSize.height = 1024;
			directionalLight.shadow.bias = -0.005;
		}

		// 窗口大小调整处理函数
		function onWindowResize() {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight);
			controls.handleResize();
		}

		//动画函数
		function animate() {
			requestAnimationFrame(animate);
			controls.update();
			render();
			stats.update();
		}

		//渲染函数
		function render() {
			if (isMove) {
				var timer = Date.now() * 0.0005;
				camera.position.x = Math.cos(timer) * 3;
				camera.position.z = Math.sin(timer) * 3;
			}

			camera.lookAt(cameraTarget);
			renderer.render(scene, camera);
		}
		//暂停动画
		function suspend() {
			isMove = false;
		}
		//继续动画
		function resume() {
			isMove = true;
		}
		//显示信息
		function showInfo() {
			var info = JSON.stringify(camera.position);
			alert(info);
		}
	</script>
</body>

</html>